<template>
  <view v-if="typeList.length" style="background-color: #fff">
    <Box title="精选产品" :content-p-top="0" :warp-m-bottom="0"></Box>
    <view class="products-type" :style="{ top: headerHeight + 'px' }">
      <scroll-view
        class="type-list"
        scroll-x
        :scroll-into-view="scrollIntoView"
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
      >
        <template v-for="(v, index) in typeList" :key="v.id">
          <view
            :id="`typeNav_${v.id}`"
            class="type-item"
            :class="[parame.productCategoryId === v.id && 'type-item__active']"
            @click.stop="typeItemClick(v.id, index)"
          >
            <text>{{ v.name }}</text>
          </view>
        </template>
      </scroll-view>
    </view>
    <view class="products-list">
      <Paglist v-model="dataList" :is-init-api="false" :parame="parame" @register="register">
        <template v-for="(v, i) in dataList" :key="v.productLibId">
          <ProductItem type="buy" :item="v" @click.stop="toDetail" @handle-click.stop="toDetail" />
        </template>
      </Paglist>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { ProductListResult } from '@/api/card/types';
  import { propTypes } from '@/utils/propTypes';
  import { nextTick, onMounted, provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import ProductItem from '@/components/ProductItem/index.vue';
  import { getOrgCardPersonalProductList, getOrgCardProductCategoryList } from '@/api/card';
  import Box from '../../components/box/index.vue';
  import { onShow } from '@dcloudio/uni-app';
  import { toHuibangCloud } from '@/utils/dynamicConfig';

  const props = defineProps({
    headerHeight: propTypes.number.def(87),
    memberLeadingId: propTypes.number.isRequired,
  });

  const scrollIntoView = ref('');
  const typeList = ref<{ id: number; name: string }[]>([]);
  function typeItemClick(id: number, index: number) {
    if (parame.productCategoryId === id) return;
    index = index <= 0 ? 0 : index - 1;
    const intoId = typeList.value[index].id;
    scrollIntoView.value = `typeNav_${intoId}`;
    parame.productCategoryId = id;
    refresh();
  }

  const parame = reactive({ productCategoryId: 0, memberLeadingId: 0 });
  const dataList = ref<ProductListResult[]>([]);
  provide('api', getOrgCardPersonalProductList);
  const [register, { refresh }] = useConList();

  const isInit = ref(false);
  async function __init() {
    isInit.value = true;
    const res = await getOrgCardProductCategoryList(props.memberLeadingId);
    typeList.value = res;
    if (res.length) {
      parame.productCategoryId = typeList.value[0].id;
      parame.memberLeadingId = props.memberLeadingId
      nextTick(() => refresh());
    }
  }

  function toDetail(item: ProductListResult) {
    // 跳转商城的商品详情
    toHuibangCloud('goodsDetail', { goodsId: item.productLibId });
  }

  onShow(() => {
    isInit.value && __init();
  });

  onMounted(() => {
    __init();
  });
</script>

<style lang="scss" scoped>
  .products-type {
    position: sticky;
    left: 0;
    background-color: #fff;
    padding: 24rpx 0;
    z-index: 1;
    .type-list {
      display: flex;
      height: 64rpx;
      .type-item {
        color: #666664;
        font-size: 28rpx;
        padding: 0 24rpx;
        white-space: nowrap;
        background-color: #f2f3f5;
        border-radius: 44rpx;
        height: 64rpx;
        line-height: 64rpx;
        margin-left: 24rpx;
        &:last-child {
          margin-right: 24rpx;
        }
        &__active {
          background-color: #2878ff;
          color: #fff;
        }
      }
    }
  }
  .products-list {
    min-height: 500rpx;
  }
</style>
